{% extends 'base.html' %} {% load staticfiles %} {% block title %}机柜详细{% endblock %} {% block css %}

<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}"> {% endblock %} {% block content %}

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
        机柜详细
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li>机房管理</li>
    <li class="active">机柜详细</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <!-- Default box -->
  <div class="box">
    <div class="box-body">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">基本信息</a></li>
          <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">更新日志</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab_1">
            <h4><b>概览:</b></b></h4>
            <div class="row">
              <div class="col-xs-2 text-right">机柜编号:</div>
              <div class="col-xs-4">{{ cabinet.name }}</div>
              <div class="col-xs-2 text-right">所属机房:</div>
              <div class="col-xs-4">{{ cabinet.room.datacenter }}</div>
            </div>
            <br>
            <div class="row">
              <div class="col-xs-2 text-right">所属机房管理单元:</div>
              <div class="col-xs-4">{{ cabinet.room }}</div>
              <div class="col-xs-2 text-right">高度(U):</div>
              <div class="col-xs-4">{{ cabinet.slotcount }}</div>
            </div>
            <br>
            <div class="row">
              <div class="col-xs-2 text-right">是否自用:</div>
              <div class="col-xs-4">{{ cabinet.get_user_display }}</div>
              <div class="col-xs-2 text-right">是否开电:</div>
              <div class="col-xs-4">{{ cabinet.get_status_display }}</div>
            </div>
            <br>
            <div class="row">
              <div class="col-xs-2 text-right">电力(A):</div>
              <div class="col-xs-4">{{ cabinet.power }}</div>
              <div class="col-xs-2 text-right">备注:</div>
              <div class="col-xs-4">{{ cabinet.memo }}</div>
            </div>
            <p style=" margin:0 auto; text-align:center;">
              <button class="btn btn-default " align="center" data-toggle="modal" data-target="#cabinetEditModal">修改</button>
            </p>
            <br>
            <h4><b>设备清单: </b>(总数{{ asset|length }})</h4>
            <table id="asset_table" border="1" class="display table table-bordered table-striped">
              <thead>
                <tr>
                  <th>固资编号</th>
                  <th>设备类型</th>
                  <th>Hostname</th>
                  <th>状态</th>
                  <th>型号</th>
                  <th>高度</th>
                  <th>维护人</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  {% for asset in asset %}
                  <td>
                      {% if asset.asset_type == 'server' %}
                      <a href="{% url 'serverdetail' asset.id %}" target=_blank>
                      {% elif asset.asset_type == 'networkdevice' %}
                      <a href="{% url 'networkdevicedetail' asset.id %}" target=_blank>
                      {% endif %}
                      {{ asset.name }}
                  </td>
                  <td>{{ asset.get_asset_type_display }}</td>
                  <td>{{ asset.hostname|default:"" }}</td>
                  <td>{{ asset.get_status_display }}</td>
                  <td>{{ asset.modelnumber|default:"" }}</td>
                  <td>{{ asset.high|default:"" }}</td>
                  <td>{{ asset.operation|default:"" }}</td>
                </tr>
                {% empty %}
                <tr>没有数据！</tr>
                {% endfor %}
              </tbody>
            </table>
            <form class="form-inline content_size" action="{% url 'cabinetdetail' cabinet.id %}" method="post">
              {% csrf_token %}
              <div class="modal fade" id='cabinetEditModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">机柜信息修改</h4>
                    </div>
                    <div class="modal-body">
                      <div class="form-group">
                        <label for="modify">机柜编号</label>
                        <input type="text" class="form-control" type="text" name='name' placeholder= {{ cabinet.name }} readonly>
                        <label for="modify">所属机房管理单元</label>
                        <input type="text" class="form-control" name='room' placeholder= {{ cabinet.room }}>
                      </div>
                      <div class="form-group">
                        <label for="modify">机柜高度</label>
                        <input type="text" class="form-control" name='slotcount' value= {{ cabinet.slotcount }}>
                        <label for="modify">是否自用</label>
                        <select class="form-control" name='user'>
                                    <option value='0' {% if cabinet.user == 0 %} selected="selected" {% endif %}>是</option>
                                    <option value='1' {% if cabinet.user == 1 %} selected="selected" {% endif %}>否</option>
                                  </select>
                        <label for="modify">是否开电</label>
                        <select class="form-control" name='status'>
                                    <option value='0' {% if cabinet.status == 0 %} selected="selected" {% endif %}>是</option>
                                    <option value='1' {% if cabinet.status == 1 %} selected="selected" {% endif %}>否</option>
                                  </select>                                                 
                      </div>
                      <div class="form-group">
                        <label for="modify">电力</label>
                        <input type="text" class="form-control" name='power' value= {{ cabinet.power }}>
                        <label for="modify">备注</label>
                        <input type="text" class="form-control" name='memo' value= {{ cabinet.memo }}>
                        <label for="modify">修改原因<font color='#ff0000'>*</font></label>
                        <input type="text" class="form-control" name='reason' required>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="submit" name="submit" value="cabinet_edit" class="btn btn-primary">确认</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <!-- /.tab-pane tab_1 -->
          <div class="tab-pane" id="tab_2">
        <h4><b>{{ asset.name }} 日志信息:</b></h4>
          <table id="eventlog_table" border="1" class="display table table-bordered table-striped">
            <thead>
              <tr>
                  <th>类型</th>
                  <th>详细内容</th>
                  <th>操作原因</th>
                  <th>操作时间</th>
                  <th>操作人</th>
              </tr>
            </thead>
            <tbody>
              {% for log in eventlog %}
              <tr>
                <td id="log_event_type">{{ log.get_event_type_display }}</td>
                <td id="log_detail">{{ log.detail }}</td>
                <td id="log_reason">{{ log.reason }}</td>
                <td id="log_date">{{ log.date|date:"Y-m-d  H:i:s" }}</td>
                <td id="log_user">{{ log.user }}</td>
              </tr>
              {% empty %}
              <tr>没有日志信息！</tr>
              {% endfor %}
            </tbody>
        </table>
          </div>
          <!-- /.tab-pane tab_2 -->
        </div>
      </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
      <i class="fa fa-angle-double-left"></i>&nbsp;&nbsp;<a href="{% url 'index' %}"><strong>返回资产列表页</strong></a>
    </div>
    <!-- /.box-footer-->
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->

{% endblock %} {% block script %}
<!-- DataTables -->
 <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
 <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
 <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'dist/js/demo.js' %}"></script>
<!-- page script -->
<script>
$(document).ready( function () {
    $('#eventlog_table').DataTable( {
    "order": [[ 3, "desc" ]]
 } )
} );

$(document).ready( function () {
    $('#asset_table').DataTable( {
    "order": [[ 0, "desc" ]]
 } )
} );
</script>
{% endblock %}
